<template>
  <a-card :bordered="false">
      <!-- <a-page-header
        sub-title="返回"
        :ghost="false"
        @back="handleBack"
    /> -->
    <div> 
      <span class="awm-back" @click="handleBack">
        <a-icon type="left"></a-icon> <span>返回</span> 
      </span>
    </div>
    <div style="height:30px;"></div>
    <div class="table-page-search-wrapper"></div>
    <div class="msg-title">
      <h3>{{ detail.title }}</h3>
      <p>{{ detail.addTime }}</p>
    </div>
    <div class="msg-content" >
      <p v-html="content"></p>
    </div>
  </a-card>
</template>

<script>

export default {
  name: 'msgDetails',
  data() {
    return {
    }
  },
  props: {
    detail: {
      type: Object,
      default: () => null,
    },
  },

  created() {},
  computed: {
    content:function(){
      let str = this.detail.content.replace(/<br>/g,'\n')
      return str;
    }
  },
  methods: {
      handleBack(){
          this.$emit('back')
      }
  },
}
</script>
<style lang="less" scoped>
.awm-back{
  &:hover{
    color: #1890ff;
    cursor: pointer;
  }
}
.msg-title {
  h3 {
    color: rgba(0, 0, 0, 0.85);
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
  }
  p {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 22px;
  }
}
.msg-content {
  border-top: 1px solid rgba(0,0,0,.1);
  padding-top: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 22px;
  text-indent: 20px;
  white-space: pre-wrap;
}
</style>